<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>伸缩相册</title>
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <style>
        .box{
            width: 810px;
            height: 500px;
            margin:50px auto;
            border: 10px solid blue;
            border-radius: 6px;
            overflow: hidden;
        }
        .warp{
            position: relative;
        }
        .box label{
            width:400px;
            height: 496px;
            display: block;
            border: 2px solid #333;
            float: left;
            position: absolute;
            top: 0;
            cursor: pointer;
            transition: 1s;
            -moz-transition:  1s; /* Firefox 4 */
            -webkit-transition: 1s; /* Safari 和 Chrome */
            -o-transition: 1s; /* Opera */

        }
        .warp label:nth-of-type(1){
            left: 0px;
            background: url("img/mv/1.jpg") no-repeat;
            background-size: 100% 100%;

        }
        .warp label:nth-of-type(2){
            left: 82px;
            background: url("img/mv/2.jpg") no-repeat;
            background-size: 100% 100%;

        }
        .warp label:nth-of-type(3){
            left: 164px;
            background: url("img/mv/3.jpg") no-repeat;
            background-size: 100% 100%;
        }
        .warp label:nth-of-type(4){
            left:246px;
            background: url("img/mv/4.jpg") no-repeat;
            background-size: 100% 100%;
        }
        .warp label:nth-of-type(5){
            left:328px;
            background: url("img/mv/5.jpg") no-repeat;
            background-size: 100% 100%;
        }
        .warp label:nth-of-type(6){
            left:410px;
            background: url("img/mv/6.jpg") no-repeat;
            background-size: 100% 100%;
        }
        .box input{
            display: none;
        }
        .warp input:checked~label{
            transform: translateX(318px);
            -ms-transform:translateX(318px); 	/* IE 9 */
            -moz-transform:translateX(318px); 	/* Firefox */
            -webkit-transform:translateX(318px); /* Safari 和 Chrome */
            -o-transform:translateX(318px);
        }
    </style>

</head>
<body>
<div class="box">
    <div class="clear warp">
        <label for="img_1"></label>
        <input type="radio" name="scxe" id="img_1">
        <label for="img_2"></label>
        <input type="radio" name="scxe" id="img_2">
        <label for="img_3"></label>
        <input type="radio" name="scxe" id="img_3">
        <label for="img_4"></label>
        <input type="radio" name="scxe" id="img_4">
        <label for="img_5"></label>
        <input type="radio" name="scxe" id="img_5">
        <label for="img_6"></label>
        <input type="radio" name="scxe" id="img_6">
    </div>
</div>
</body>
</html>